<template>
  <div class="shop">
    <Head>购物车</Head>
    <div class="shopCar" v-if="$store.state.car.carList.length">

      <div class="shopBox" v-for="(item, i) in $store.state.car.carList"
            :key="i">
      <div class="check">
        <van-checkbox v-model="item.isCheck" @click="check" checked-color="#ee0a24"></van-checkbox>
      </div>
      <div class="shopImg">
        <img :src=item.img alt="">
      </div>
      <div class="details">
        <div class="titil">{{item.name}}</div>
        <div class="action">
          <div class="price">¥{{item.price*item.buyNum}}</div>
          <div class="count">
            <van-field name="stepper" >
            <template #input>
              <van-stepper v-model="item.buyNum" @change="chan" />
            </template>
          </van-field>
          </div>
          <div class="del" @click="del(item.id)">删除</div>
        </div>
      </div>

    </div>
    
    

    </div>
    <div class="kong" v-else>
      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170401%2F2f523043409747a9b68c1bcf6fd353a5_th.jpeg&refer=http%3A%2F%2Fimg.mp.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618648442&t=be4743228f8a36318148e2c21ff9b0f6" alt="">
    </div>
    
    <div class="clear">
      <div class="btn">合计：<span class="money"
            >¥{{total}}</span></div>
      <div class="add" @click="buy">
        <router-link to="./submit" >去结算</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import Head from "../components/Head"
import Vue from 'vue';

import { Checkbox, CheckboxGroup } from 'vant';
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
  export default {
    data() {
    return {
      
    };
  },
    components:{
      Head,
    },
    mounted() {
      console.log(this.$store.state.car.carList)
  },
  computed: {
    total() {
      return this.$store.state.car.carList.filter(function(item){return item.isCheck==true}).reduce(
        (a, b) => (a+=b.price*b.buyNum),
        0
      );
    },
  },
  methods:{
    check(){
      this.$store.commit("SET_CAR_ISCHECK")
    },
    chan(){
      this.$store.commit("CHANGE_BUYNUM")
    },
    del(id){
       this.$store.commit("DEL_CARLIST",id); 
    },
    buy(){
      this.$store.state.order.orderList=this.$store.state.car.carList
    }
    
  }
  }
</script>

<style scoped>
.kong img{
  width: 100%;
  height: 100%;
}
.shop{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 91%;
}
.shopCar{
  height: 80%;
  
}
.shopBox{
  height: 14%;
  width: 100%;
  border-bottom: 1px solid rgba(217, 217, 217, 1);
  display: flex;
}
.check{
  width: 11%;
  height: 100%;
}
.van-checkbox{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.shopImg{
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  
}
.shopImg img{
  width: 80%;
  height: 80%;
  
}
.details{
  width: 69%;
  height: 80%;
  font-size: 12px;
  margin-top: 1%;
}
.action{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price{
  color: rgba(255, 85, 26, 1);
}
.del{
  padding-right: 10%;
}
.shopAnd{
  height: 4%;
  width: 93%;
  font-size: 12px;
  color: rgba(255, 85, 26, 1);
  padding: 3% 0 0 7%;
}
.shopRecommend{
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.recommendBox img{
  width: 54px;
  height: 54px;
}
.recommendBox h2{
  font-size: 10px;
  color: rgba(0, 0, 0, 1);
  font-weight: normal;
}
.recommendBox p{
  font-size: 10px;
  color: rgba(255, 85, 26, 1);
}
.clear{
    width: 100%;
    height: 48px;
    display: flex;
    text-align: center;
    line-height: 48px;
}
.clear .btn{
    text-align-last: left;
    flex: 3;
    background-color: rgba(224, 224, 224, 1);
    padding-left: 7%;
    font-size: 12px;
}
.clear .btn .money{
    font-size: 14px;
    color: rgba(255, 85, 26, 1);
}
.clear .add{
    flex: 1;
    background-color: rgba(255, 85, 26, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
}
.clear .add a{
  color: rgba(255, 255, 255, 1);
}
</style>